<!-- 离职申请 -->
<template>
  <div class="Resign">
    <!-- top -->
    <div class="resign-top">
      <span>离职申请</span>
    </div>
    <!-- top -->

    <!-- min -->
    <div class="Resign-min">
      <!-- 表单 -->
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        height="380"
        style="width: 100%"
      >
        <!-- 下拉框 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="工号">
                <span>{{ props.row.number }}</span>
              </el-form-item>
              <el-form-item label="姓名">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="二级部门">
                <span>{{ props.row.departmenttwo }}</span>
              </el-form-item>
              <el-form-item label="部门领导">
                <span>{{ props.row.leader }}</span>
              </el-form-item>
              <el-form-item label="离职日期">
                <span>{{ props.row.resigndate1 }}</span>
              </el-form-item>
              <el-form-item label="入职日期">
                <span>{{ props.row.entrydate2 }}</span>
              </el-form-item>
              <el-form-item label="离职原因">
                <span>{{ props.row.resignreason }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- 下拉框 -->

        <!-- 表头 -->
        <el-table-column label="申请时间" prop="resigndate1"> </el-table-column>
        <el-table-column label="工号" prop="number"> </el-table-column>
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
          <el-steps :space="70" :active="reviewstatu[scope.$index]" finish-status="success">
            <el-step title="待审核"></el-step>
            <el-step title="审核中"></el-step>
            <el-step title="审核完"></el-step>
          </el-steps>
          </template>
        </el-table-column>
        <!-- 表头 -->

        <!-- 表单右侧 -->
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              :key="scope.$index"
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>

          <!-- 撤销按钮 -->
          <template slot-scope="scope" style="position: relative">
            <el-button
              size="mini"
              type="danger"
              style="position: absolute; top: 36%; left: 40%"
              @click="handleRevoke(scope.$index, scope.row)"
            >
              撤销
            </el-button>
          </template>
          <!-- 撤销按钮 -->
        </el-table-column>
        <!-- 表单右侧 -->
      </el-table>
      <!-- 表单 -->
    </div>
    <!-- min -->

    <!-- footer -->
    <div class="footer">
      <el-table :data="listData">
        <!--footer 下拉框 -->
        <el-table-column type="expand">
          <!--  class="demo-table-expand" -->
          <template slot-scope="props">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              label-position="left"
              class="demo-ruleForm"
            >
              <el-form-item label="工号" prop="number">
                <el-input
                  v-model="ruleForm.number"
                  style="width: 60%"
                >{{props.row.number}}</el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" style="width: 60%"></el-input>
              </el-form-item>
              <el-form-item label="二级部门" prop="departmenttwo">
                <el-input
                  v-model="ruleForm.departmenttwo"
                  style="width: 60%"
                ></el-input>
              </el-form-item>
              <el-form-item label="部门领导" prop="leader">
                <el-input
                  v-model="ruleForm.leader"
                  style="width: 60%"
                ></el-input>
              </el-form-item>

              <el-form-item label="申请日期" required>
                <el-col :span="11">
                <el-form-item prop="resignreason">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.resigndate1"
                  style="width: 100%"
                ></el-date-picker>
                </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="入职时间" required>
                <el-col :span="11">
                  <el-form-item prop="entrydate2">
                    <el-date-picker
                      type="date"
                      format="yyyy-MM-dd" 
                      placeholder="选择日期"
                      v-model="ruleForm.entrydate2"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="申请原因" prop="resignreason">
                <el-input
                  type="textarea"
                  v-model="ruleForm.resignreason"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)"
                  >提交申请</el-button
                >
                <el-button @click="resetForm()">重置</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- footer 下拉框 -->

        <!-- 表头 -->
        <el-table-column label="" prop="title"> </el-table-column>
        <!-- 表头 -->
      </el-table>
    </div>
    <!-- footer -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      listData: [
        {
          title: "申请表单",
        },
      ],
      tableData: [],
      search: "",
      reviewstatu: [],
      ruleForm: {
        resigndate1: "",
        entrydate2: "",
        number: "",
        name: "",
        departmenttwo: "",
        leader: "",
        resignreason: "",
      },
      rules: {
        number: [
          { required: true, message: "请输入工号", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        leader: [
          { required: true, message: "请输入部门经理", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        resigndate1: [
          {
            type: "date",
            required: true,
            message: "请选择申请离职日期",
            trigger: "change",
          },
        ],
        entrydate2: [
          {
            type: "date",
            required: true,
            message: "请选择入职日期",
            trigger: "change",
          },
        ],
        resignreason: [
          { required: true, message: "请填写申请离职的原因", trigger: "blur" },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击撤销
    handleRevoke(index, row) {
      console.log(index, row);

    },

    // 获取数据
    getInform: function () {
      this.$http.get("/getResignInform").then((res) => {
        // console.log(res.data[0].resigndate1);
        // console.log(res.data[0].entrydate2);
        this.tableData = res.data;
        // console.log(res.data)
        this.reviewstatu = res.data.map(i=>{
          // console.log(i)
          // console.log(i.reviewstatus)
          return i.reviewstatus
          
        })
        // console.log(this.reviewstatu)
      });
    },

    // 点击添加提交申请
    submitForm: function (res) {
      // console.log(res);
      let yy1 = String(new Date(res.resigndate1).getFullYear());
      let mm1 = new Date(res.resigndate1).getMonth()+1;
      let dd1 = new Date(res.resigndate1).getDate();
      var date1 = yy1 +'-'+ mm1 +'-'+ dd1;
      // console.log(date1)

      let yy2 = String(new Date(res.entrydate2).getFullYear());
      let mm2 = new Date(res.entrydate2).getMonth()+1;
      let dd2 = new Date(res.entrydate2).getDate();
      var date2 = yy2 +'-'+ mm2 +'-'+ dd2;
      // console.log(date2)
      this.tableData.push({
        number: res.number,
        name: res.name,
        departmenttwo: res.departmenttwo,
        review: res.review,
        leader: res.leader,
        resigndate1: date1,
        entrydate2: date2,
        resignreason: res.resignreason,
        reviewstatu: 0,
      })

      // 自动刷新
      // this.$router.go(0);
    },

    // 点击重置
    resetForm: function (){
      this.ruleForm = {
        resigndate1: "",
        entrydate2: "",
        number: "",
        name: "",
        departmenttwo: "",
        leader: "",
        resignreason: "",
      }
    }
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getInform();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Resign {
  .resign-top {
    padding: 20px;
    margin: 20px;
    padding-top: 60px;
    span {
      display: inline-block;
      color: #333;
      font-size: 30px;
      font-weight: 600;
    }
  }

  .Resign-min {
    .demo-table-expand {
      font-size: 0;
      label {
        width: 90px;
        color: #99a9bf;
      }
      .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
      }
    }
  }

  .footer {
    margin-bottom: 60px;
    el-table {
      el-table-column {
        el-form {
          el-form-item {
            el-input {
            }
          }
        }
      }
    }
  }
}
</style>
